<template>
  <div class="box">
    <div class="logo-box">
      <img src="../assets/logo2.png">
    </div>

    <div class="search-box">
      <div class="search-input-box">
        <input v-model="searchQuery" placeholder="请输入你要搜索的内容" @input="handlePreviewSearch" @blur="blurHandle"/>
      </div>
      <div class="search-input-box">
        <button @click="search">cloudSearch</button>
      </div>

      <div class="search-preview-box" v-show="searchPreviewBoxIsShow">
        <ul>
          <li @click="handleSearch" v-for="result in searchPreviewResults" :key="result">{{ result.title }}</li>

        </ul>
      </div>
    </div>


    <div class="search-content" v-show="searchContentBoxIsShow">
      <ul>
        <li v-for="result in searchResults" :key="result">
          <div v-if="result.type=='TEXT'" class="item-box">
            <a :href="result.path" class="title" v-html="result.title"></a>
            <div class="detail-box">
              <a :href="result.path" class="img-box"><img :src="result.img"></a>
              <p class="content content-info" v-html="result.content"></p>
            </div>
          </div>

          <div v-else-if="result.type=='BRIEF_INTRODUCTION'" class="item-box introduce-box">
            <a :href="result.path" class="title"><span v-html="result.title"></span>-百科介绍</a>
            <div class="detail-box introduce-content-box">
              <a :href="result.path" class="img-box"><img :src="result.img"></a>
              <div class="content ">
                <div class="introduce-content">职业：{{result.career}}</div>
                <div class="introduce-content  introduce-details">主要成就：<span v-html="result.content"></span></div>
                <div class="introduce-content introduce-tag-box">
                  <p>人物经历</p>
                  <p>个人生活</p>
                  <p>个人成就</p>
                  <p>获奖记录</p>
                </div>
              </div>
            </div>
          </div>
        </li>


      </ul>
    </div>

    <div class="page-box" v-show="searchContentPageIsShow">
      <div class="previous page-item page-btn-border" v-show="currentPage>1">上一页</div>
      <div class="page page-item">共{{ total }}条结果</div>
      <div class="next page-item page-btn-border" @click="nextPage" v-show="page > currentPage">下一页</div>
    </div>
  </div>
</template>
<style scoped>
.box {
  margin: 18px auto;
  width: 800px;
}

.logo-box {
  height: 120px;
  width: 800px;

}

.logo-box img {
  width: 80%;
  height: 120px
}


.search-box {
  display: flex;
  position: relative;
  margin-bottom: 30px;
  font-size: 22px;

}

.search-box input {
  width: 600px;
  height: 55px;
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
  border: 2px solid #4e6ef2;
  padding-left: 18px;

}

.search-box button {
  width: 195px;
  height: 55px;
  border-bottom-right-radius: 6px;
  border-top-right-radius: 6px;
  background: #4e6ef2;
  border: none;
  color: white;
}

/* 去除 input 焦点框 */
input:focus {
  outline: none;
}

/* 去除 input 焦点框 */
button:focus {
  outline: none;
}

.search-preview-box {
  width: 600px;
  color: darkgrey;
  background: white;
  position: absolute;
  border: 2px solid #4e6ef2;
  /*border-top: none;*/
  top: 54px;
  border-top: 1px solid gainsboro;
  padding-left: 18px;


}

.search-preview-box ul li {
  padding: 3px 6px;

}

.search-content {
  height: 700px;
  overflow: scroll;

}

.search-content ul li {
  font-size: 22px;
  width: 800px;
  min-height: 50px;

}

.title {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-weight: bold;

}

.detail-box {
  width: 100%;
  display: flex;
  padding-top: 6px;
  height: 150px;
  overflow: hidden;
}

.content-info {
  color: #5656a3;
  font-size: 16px;

}


.detail-box .img-box {
  width: 180px;
  /*height: 200px;*/
  margin-left: 6px;
  border-radius: 9px;
}

.detail-box .content {
  width: 100%;
  padding-left: 12px;
  text-decoration: none;

}

.introduce-box {
  height: 210px;
}

.introduce-content-box {
  width: 98%;
  border-radius: 9px;
  box-shadow: 0px 0px 6px #d7d7d7;
  color: #333;
  font-size: 16px;
}

.introduce-content {
  margin-top: 3px;
}

.introduce-details {
  max-height: 70px;
  overflow: hidden;
}

.introduce-tag-box {
  height: 50px;
  width: 100%;

}

.introduce-tag-box p {
  height: 30px;
  width: 80px;
  float: left;
  margin: 8px;
  line-height: 30px;
  text-align: center;
  background: #e4e4e4;
  color: #001cff;


}

.introduce-tag-box p:hover {
  cursor: pointer;
}

.img-box img {
  width: 100%;
}

.page-box {
  display: flex;
  width: 300px;
  left: 40%;
  margin: 0px auto;
}
.page-btn-border{
  border: 1px solid #f4f3f3;

}
.page-item {
  flex: 1;
  text-align: center;
}
</style>
<script>
import api from "../services/api.js";

export default {
  data() {
    return {
      searchQuery: '', // 用户输入的搜索内容
      searchResults: [], // 存储搜索结果的数组
      searchPreviewResults: [], // 存储搜索结果的数组
      searchPreviewBoxIsShow: false,//搜索预览框是否显示
      searchContentBoxIsShow: false,//搜索预览框是否显示
      searchContentPageIsShow: false,//分页是否显示
      searchLastId: "",//最后一条数据id
      page: "",//当前页数
      total: "",//当前页数
      currentPage: 1//当前页数

    };
  },
  methods: {
    async handlePreviewSearch() {
      // 在这里执行实时搜索的逻辑，例如向服务器发送请求获取搜索结果
      try {
        const response = await api.get('search/preview/list?keyword=' + this.searchQuery); // Replace with your API endpoint
        console.log("re", response.data.data)
        this.searchPreviewResults = response.data.data;
        if (this.searchPreviewResults.length > 0) {
          this.searchPreviewBoxIsShow = true;
        }
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }, async handleSearch() {
      // 在这里执行实时搜索的逻辑，例如向服务器发送请求获取搜索结果
      try {
        this.searchPreviewBoxIsShow = false;
        let response;
        if (this.searchLastId == "" || this.searchLastId == null) {
          response = await api.get('search?keyword=' + this.searchQuery);
        } else {
          response = await api.get('search?keyword=' + this.searchQuery + "&lastId=" + this.searchLastId);

        }
        this.searchResults = response.data.data.records;
        if (this.searchResults.length > 0) {
          this.searchContentBoxIsShow = true;
        }
        if (response.data.data.pages > 1) {
          this.searchContentPageIsShow = true;
          this.page = response.data.data.pages
          this.total = response.data.data.total
          this.searchLastId = this.searchResults[this.searchResults.length - 1].id
        } else {
          this.searchContentPageIsShow = false;

        }
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }, blurHandle() {
      //输入框失去焦点触发
      this.searchPreviewBoxIsShow = false;

    }
    , nextPage() {
      //分页查询

      if (this.currentPage >= this.page) {
        return
      }
      this.handleSearch()
      this.currentPage++
    }, search() {
      //搜索
      this.currentPage=1;
      this.searchLastId = ""
      this.handleSearch()
    }
  }
};
</script>